<template>
	<view class="box">
		<!-- 预留状态栏高度 -->
		<!-- 页面加载时获取到不同机型对应的状态栏的高度 -->
		<view class="statusBar" :style="{height:statusHeight}"></view>
		<view class="tab" @click="back">	
			登录
		</view>
		<view class="main">
			<form>
				<input placeholder="请输入用户名" v-model="formData.userAccount"/>
				<input placeholder="请输入密码" password v-model="formData.userPassword"/>
			</form>
			<button @click="login">登录</button>
			<view class="register" @click="register">
				现在注册?
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 传给后端的内容
				formData:{
					userAccount:'',
					userPassword:'',
				},			
				statusHeight:0,				
			}
		},
		onLoad(){
			// 获取设备信息 状态栏高度
			var info = uni.getSystemInfoSync();
			// console.log(info);
			this.statusHeight=info.statusBarHeight+'px';
		},
		methods:{
			login(){
				var that = this;
				var reg = /^[a-zA-Z0-9_-]{6,20}$/;
				// 1、表单验证---非空验证+长度校验
				if(!(this.formData.userAccount&&this.formData.userPassword)){
					// 提示用户
					return uni.showToast({
						title:'内容不得为空',
						icon:"error"
					})
				}else if(!(reg.test(this.formData.userAccount)&&reg.test(this.formData.userPassword))){
					// 提示用户
					return uni.showToast({
						title:'输入长度6-20位',
						icon:"error"
					})
				};
				// 2、发请求，根据请求结果、做对应操作	
				uni.request({
					url:"http://124.221.202.161/user/login",
					method:"POST",
					data:this.formData,
					success(res) {
						// console.log(res.data);
						// console.log(res.data.code);
						// console.log(res.data.data.userAccount);
						// console.log(res.data.data);
						// console.log(res.data.data.token);
						if(res.data.code==0){
							// 登录成功
							// 存储对应信息	
							// console.log('token1'+res.data.data.token);
							var datas = {
								userAccount:res.data.data.userAccount,
								userHeadImg:res.data.data.userHeadImg,
								userPhone:res.data.data.userPhone,
								token:res.data.data.token,
							};
							that.$store.commit('LOGIN',datas);
							// 登录成功后，后端返回token为null 现已ok
							// console.log("token2"+res.data.data.token);
							uni.setStorageSync('token', res.data.data.token);
							// uni.setStorageSync('userState', res.data.data.userState);//=1
							uni.switchTab({
								url: '/pages/my/my'
							})
						}else{
							// 提示用户
							return uni.showToast({
								title:'用户名密码错误',
								icon:"error"
							})
						}
						
					},
				})
			},
			// 跳转到注册页面
			register(){
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			// 返回上一页
			back(){
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.statusBar{
		width: 100%;
		background-color: #fff;
	}
	.tab{
		width: 100%;
		height: 100rpx;
		color: white;
		background-color:blue;
		text-align: center;
		line-height: 100rpx;
		pointer-events: none;
		&:before{
			content: "<";
			box-sizing: border-box;
			height: 100rpx;
			width: 100rpx;
			color: white;
			position: absolute;
			left: 0;
			pointer-events: auto;
		}
		
	}
	.main{
		box-sizing: border-box;
		width: 90%;
		height: 450rpx;
		background-color: #eee;
		margin: 100rpx auto;
		padding: 30rpx 100rpx;
		form{
			input{
				height: 50rpx;
				margin: 20rpx 0;
				border-bottom:1px solid #ccc;
			}
		}
		button{
			height: 70rpx;
			background-color: blue;
			color:white;
			border-radius:70rpx;
			margin-top: 100rpx;
			line-height: 70rpx;
		}
		.register{
			margin: 20rpx auto;
			width:150rpx;
			height:40rpx;
			text-align: center;
			line-height: 40rpx;
			color: #ccc;
		}
	}
</style>